<template>
  <border :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText"
          :organType="borderConfig.organType"
          :goPageUrl="borderConfig.goPageUrl">
    <div class="vacancy-in-the-year"
         slot="module-content">
      <div class="vacancy-in-the-year--container">
        <div class="vacancy-in-the-year--container__chart"
             ref="originalVacancyDurationChart">

        </div>
      </div>
      <div class="vacancy-in-the-year--container">
        <div class="vacancy-in-the-year--container__chart"
             ref="classificationOfVacantResourcesChart">

        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from '@/views/components/Border.vue'
import echarts from 'echarts'

function deepMerge (FirstOBJ, SecondOBJ) { // 深度合并对象
  for (var key in SecondOBJ) {
    FirstOBJ[key] = FirstOBJ[key] && typeof FirstOBJ[key] === 'object'
      ? deepMerge(FirstOBJ[key], SecondOBJ[key]) : FirstOBJ[key] = SecondOBJ[key]
  }
  return FirstOBJ
}

const chartConfig = {
  title: {
    left: 'center',
    top: 0,
    textStyle: {
      color: '#ffffff',
      fontSize: 14,
      fontStyle: 'normal',
      fontWeight: 'bold'
    }
  },
  color: ['#00c272', '#0b3fee', '#5d4fe6', '#dfa934'],
  tooltip: {
    trigger: 'item',
    formatter: '{d}%'
  },
  legend: {
    icon: 'rect',
    itemWidth: 10,
    itemHeight: 10,
    left: 'center',
    top: 'bottom',
    // data: ['产业办公', '文化', '产房', '商业'],
    textStyle: {
      color: '#a4b3c7'
    }
  },
  series: {
    radius: ['23%', '46%'],
    startAngle: 210,
    label: {
      normal: {
        formatter: '{a|{c}万㎡}\n{d}%',
        textStyle: {
          color: '#ffffff',
          fontSize: 14
        },
        rich: {
          a: {
            fontSize: 16,
            color: '#ffffff',
            fontWeight: 'bold'
          }
        }
      }
    },
    labelLine: {
      normal: {
        lineStyle: {
          length: 10,
          length2: 10,
          color: '#85d4f8',
          width: 1.5
        }
      }
    },
    itemStyle: {
      normal: {
        borderColor: '#000000', borderWidth: 1
      }
    },
    // hoverAnimation: false,
    type: 'pie'
  }
}

export default {
  data () {
    return {
      borderConfig: {
        moduleType: '2x1',
        icon: '',
        titleText: '本年空置情况'
      },
      moduleConfig: {
        isOctagon: false, // 是否需要头部的八边形
        topType: '13', // 第一层显示内容
        bottomType: '14' // 第二层显示内容
      },
      originalVacancyDurationData: [],
      originalVacancyDurationChart: {},
      classificationOfVacantResourcesData: [],
      classificationOfVacantResourcesChart: {}
    }
  },
  mounted () {
    // this.getData()
    //   .then(() => {
    //     this.initChart()
    //   })
  },
  methods: {
    getData () {
      return this.assetsManagementApi.vacantInfo({
        organId: this.organId
      })
        .then(result => {
          const resData = result.data
          if (+resData.code === 0) {
            this.originalVacancyDurationData = resData.data.timeDistributed
            this.classificationOfVacantResourcesData = resData.data.typeDistributed
            this.initChart()
          }
        })
    },
    initChart () {
      this.originalVacancyDurationChart = echarts.init(this.$refs.originalVacancyDurationChart)
      this.classificationOfVacantResourcesChart = echarts.init(this.$refs.classificationOfVacantResourcesChart)
      this.originalVacancyDurationChart.setOption(this.getOVDChartOpiton())
      this.originalVacancyDurationChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 })
      this.classificationOfVacantResourcesChart.setOption(this.getCOVRChartOpiton())
      this.classificationOfVacantResourcesChart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 })
    },
    getOVDChartOpiton () {
      return deepMerge({
        title: {
          text: '原空置时长分析'
        },
        legend: {
          data: this.originalVacancyDurationData.map(v => { return v.name })
        },
        series: {
          data: this.originalVacancyDurationData
        }
      }, chartConfig)
    },
    getCOVRChartOpiton () {
      return deepMerge({
        title:
        {
          text: '空置资源分类分析'
        },
        legend: {
          data: this.classificationOfVacantResourcesData.map(v => { return v.name })
        },
        series: {
          data: this.classificationOfVacantResourcesData
        }
      }, chartConfig)
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    }
  },
  components: {
    Border
  }
}
</script>

<style lang="scss" scoped>
.vacancy-in-the-year {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;

  &--container {
    width: 50%;

    &__chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
